<template>
  <div>
    <div>
      <template>
        <el-table
          :data="fileList"
          border
          max-height="300"
          :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="index" width="50" label="序号" />
          <el-table-column show-overflow-tooltip prop="attachmentType" label="附件类型" />
          <el-table-column show-overflow-tooltip prop="attachmentName" label="附件名称" />
          <el-table-column prop="createBy" label="上传人" />
          <el-table-column show-overflow-tooltip prop="createTime" label="上传时间" />
          <el-table-column min-width="130" fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handlePreview(scope.row,scope.$index)">预览</el-button>
              <a
                style="text-decoration: none;color:#39c094;font-size: 12px;"
                :href="url+'/'+scope.row.attachmentUrl"
                :download="scope.row.attachmentName"
              >
                下载
              </a>

            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <!-- 图片预览 -->
    <el-image-viewer
      v-if="imgDialogVisible"
      :z-index="3000"
      :on-close="handleCloseImg"
      :url-list="previewImg"
    />
  </div>
</template>
<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import { filterURL } from '@/utils'
import { getShopAttachment } from '@/api/common'
export default {
  name: 'FileDetail',
  components: { ElImageViewer },
  props: {
    modelId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      fileList: [],
      imgDialogVisible: false,
      previewImg: [],
      url: '/pdf-file/'
    }
  },
  watch: {
    modelId: {
      handler(v) {
        if (v) {
          // 请求附件数据
          getShopAttachment(v).then(res => {
            if (res.success) {
              this.fileList = res.data
            }
          })
        }
      },
      immediate: true
    }
  },
  created() {
  },

  methods: {
    handleSelectionChange(val) {
      this.$emit('select', val)
    },
    handleCloseImg() {
      this.imgDialogVisible = false
    },
    handlePreview(file, index) {
      const fileExtension = file.attachmentUrl.substring(file.attachmentUrl.lastIndexOf('.') + 1).toLowerCase()
      if (fileExtension === 'jpg' || fileExtension === 'jpeg' || fileExtension === 'png' || fileExtension === 'gif' || fileExtension === 'bmp') {
      // 图片预览
        if (file.attachmentUrl.substring(0, 11) === 'http://fbpm') {
          window.open(file.attachmentUrl)
          return
        }
        this.previewImg = []
        this.imgDialogVisible = true
        const list = [...this.fileList.slice(index), ...this.fileList.slice(0, index)]
        this.previewImg = list.map(v => filterURL(v.attachmentUrl))
      } else if (fileExtension === 'doc' || fileExtension === 'docx' || fileExtension === 'xlsx' || fileExtension === 'pdf' || fileExtension === 'pptx') {
        // window.open(`${process.env.VUE_APP_OFFICE_PREFIX}?src=` + process.env.VUE_APP_Img_prefix + file.attachmentUrl)
        window.open(`${process.env.VUE_APP_OFFICE_PREFIX}?src=` + filterURL(file.attachmentUrl))
      } else {
        this.$message.warning(fileExtension + '该文件类型不支持预览')
      }

      // const fileExtension = file.attachmentUrl.substring(file.attachmentUrl.lastIndexOf('.') + 1).toLowerCase()
      // if (fileExtension === 'pdf') {
      //   // pdf预览
      //   const url = this.url + file.attachmentUrl
      //   const routeData = this.$router.resolve({
      //     path: '/viewFile',
      //     query: {
      //       src: btoa(url)
      //     }
      //   })
      //   window.open(routeData.href, '_blank')
      // } else if (fileExtension === 'jpg' || fileExtension === 'jpeg' || fileExtension === 'png') {
      // // 图片预览
      //   this.imgDialogVisible = true
      //   this.previewImg = filterURL(file.attachmentUrl)
      // } else if (fileExtension === 'doc' || fileExtension === 'docx' || fileExtension === 'xlsx' || fileExtension === 'excel') {
      //   // word,excel预览
      //   window.open('http://oos.quanyou.com.cn/op/view.aspx?src=' + filterURL(file.attachmentUrl))
      // } else {
      //   this.$message.warning('该文件类型不支持预览')
      // }
    }
  }
}
</script>
